<template>
    <div class="content">
        <div class="clearfix">
            <Form class="f-fl" inline :label-width="5">
                <FormItem>
                    <Input
                        v-model="params.name"
                        placeholder="实训名称"
                    ></Input>
                </FormItem>
                <FormItem>
                    <Select v-model="params.status" placeholder="状态" style="width:100px" clearable>
                        <Option v-for="(item, k) in trainingStatus" :key="k" :value="k" :label="item"></Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Select v-model="params.model" placeholder="模式" style="width:100px" clearable>
                        <Option v-for="item in trainingMode" :key="item.value" :value="item.value" :label="item.label" />
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="search">搜索</Button>
                </FormItem>
                <FormItem>
                    <Button @click="clearSearch">清空</Button>
                </FormItem>
            </Form>
            <div class="f-fr">
                <Button type="primary" @click="handleAdd">新建实训</Button>
            </div>
        </div>
        <div class="clearfix">
            <div class="training-card" v-for="item in list" :key="item.id">
                <div class="training-card--head">{{ item.name }}</div>
                <div class="training-card--status">{{ trainingStatus[item.status] }}</div>
                <div class="training-card--body" @click="handleDetail(item)">
                    <div class="training-card--item">
                        <div class="training-card--label">实训类型：</div>
                        <div class="training-card--content">{{tasks[item.task]}}</div>
                    </div>
                    <div class="training-card--item">
                        <div class="training-card--label">实训案例：</div>
                        <div class="training-card--content">案例名称</div>
                    </div>
                    <div class="training-card--item">
                        <div class="training-card--label">开始时间：</div>
                        <div class="training-card--content">{{ item.startTime }}</div>
                    </div>
                    <div class="training-card--item">
                        <div class="training-card--label">结束时间：</div>
                        <div class="training-card--content">{{ item.endTime }}</div>
                    </div>
                    <div class="training-card--item">
                        <div class="training-card--label">实训班级：</div>
                        <div class="training-card--content">班级一</div>
                    </div>
                    <div class="training-card--item">
                        <div class="training-card--label">创建人：</div>
                        <div class="training-card--content">{{ item.creator }}</div>
                    </div>
                </div>
                <div class="training-card--btns">
                    <Button type="primary" :disabled="!!item.publish" @click="publishTraining(item)">发布</Button>
                    <Button :disabled="!!item.publish" @click="editTraining(item)">编辑</Button>
                    <Button :disabled="item.disabledDel" @click="delTraining(item)">删除</Button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { queryTrainingList, publishTraining, deleteTraining } from '@/api/trainingManage'
import { transforArr, trainingMode, trainingStatus } from '@/libs/enums'

export default {
    inject: ['nextPageReload'],
    data () {
        return {
            tasks: {
                1: '许可证申请',
                2: '原产地证申请',
                3: '成品出口申报',
                4: '料件进口申报',
                5: '保税加工贸易',
                6: '出口申报',
                '': ''
            },
            trainingMode: transforArr(trainingMode),
            trainingStatus: trainingStatus,
            params: {
                total: 0,
                pageNum: 1,
                pageSize: 10,
                name: '',
                model: '',
                status: ''
            },
            list: []
        }
    },
    mounted () {
        this.queryList()
    },
    methods: {
        handleAdd () {
            this.nextPageReload()
            this.$router.push({
                name: 'trainingAdd'
            })
        },
        handleDetail ({ id }) {
            this.nextPageReload()
            this.$router.push({
                name: 'trainingDetail',
                params: {
                    id
                }
            })
        },
        search () {
            this.params.pageNum = 1
            this.queryList()
        },
        clearSearch () {
            const params = this.params
            params.name = ''
            params.model = ''
            params.status = ''
            this.search()
        },
        queryList () {
            queryTrainingList(this.params).then(res => {
                if (res.data.code === '0000') {
                    const data = res.data.data
                    const delDisabled = [2, 3]
                    data.list.forEach(item => {
                        item.disabledDel = delDisabled.includes(item.status)
                    })
                    this.list = data.list
                    this.params.total = data.total
                }
            })
        },
        publishTraining (item) {
            publishTraining(item.id).then(res => {
                if (res.data.code === '0000') {
                    this.queryList()
                    this.$Message.success('发布成功')
                } else {
                    this.$Message.error(res.data.msg)
                }
            })
        },
        delTraining (item) {
            deleteTraining(item.id).then(res => {
                if (res.data.code === '0000') {
                    this.queryList()
                    this.$Message.success('删除成功')
                } else {
                    this.$Message.error(res.data.msg)
                }
            })
        },
        editTraining (item) {
            this.nextPageReload()
            this.$router.push({
                name: 'trainingEdit',
                params: {
                    id: item.id
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
@border-color: #eee;
.training-card {
    border: 1px solid @border-color;
    width: 300px;
    float: left;
    margin-left: 15px;
    margin-bottom: 15px;
    position: relative;
    &--head {
        font-size: 18px;
        font-weight: 700;
        padding: 10px 100px 10px 10px;
    }
    &--status {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 16px;
    }
    &--body {
        padding: 0 10px;
    }
    &--item {
        zoom: 1;
        margin-bottom: 8px;
    }
    &--label {
        width: 90px;
        line-height: 24px;
        text-align: right;
        float: left;
    }
    &--content {
        margin-left: 100px;
        line-height: 24px;
        min-height: 24px;
    }
    &--btns {
        text-align: center;
        .ivu-btn {
            width: 33.33%;
        }
    }
}
</style>
